<template>
	<div class="tab pf">
		<router-link tag="div" class="tab-item" to="/index">
			<span class="icon index"></span>
            <span class="tab-link">首页</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/care">
			<span class="icon care"></span>
            <span class="tab-link">关注</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/message">
			<span class="icon message"></span>
            <span class="tab-link">消息</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/mine">
			<span class="icon mine"></span>
            <span class="tab-link">我的</span>
        </router-link>
	</div>
</template>

<script type="text/ecmacript-6">
export default {

}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.tab
	display : flex
	bottom : 0
	left : 0
	width : 100%
	height : 4.5 * $font-size-small
	font-size : $font-size-small-s
	backdrop-filter : blur(10px)
	opacity : 1
	background : #f9f9f9
	.tab-item
		flex : 1
		text-align : center
		border-1px(rgba(7,17,27,.1))
		.tab-link
			color : $color-ae
		.icon
			display : block
			margin:8px auto 4px
		.index
			width : 25px
			height : 2 * $font-size-small
			bg-image("index")
			background-size : 25px 2 * $font-size-small
		.care
			width : 2 * $font-size-medium
			height : 2 * $font-size-small
			bg-image("care")
			background-size : 2 * $font-size-medium 2 * $font-size-small
		.message
			width : 2 * $font-size-medium
			height : 2 * $font-size-small
			bg-image("msg")
			background-size : 2 * $font-size-medium 2 * $font-size-small
		.mine
			width : 2 * $font-size-medium
			height : 2 * $font-size-small
			bg-image("mine")
			background-size : 2 * $font-size-medium 2 * $font-size-small
		&.router-link-active
			.tab-link
				color : $color-000
			.index
				bg-image("index_active")
			.care
				bg-image("care_active")
			.message
				bg-image("msg_active")
			.mine
				bg-image("mine_active")
</style>
